<template>
  <div id="show">
    <div class="lf">
      <img class="left-kv" src="../../images/show/1.jpg" alt>
    </div>
    <div class="rg">
      <div class="img">
        <img class="production" src="../../images/show/4.jpg" alt>
      </div>
      <div class="txt">全新山茶花润泽水感乳液</div>
      <div id="code">
        <canvas id="qrcode" style="display:none"></canvas>
        <img class="img" :src="codeUrl" alt>
      </div>
      <div class="txt-sm">即刻扫码申领试用</div>
      <div class="txt-sm">
        前往
        <a
          href="https://www.chanel.com/zh_CN/fragrance-beauty/skincare/c/hydra-beauty.html?utm_source=weibo&utm_medium=smaorganic&utm_campaign=fb_sk_hydrabeauty_20190430&utm_content=20190506_w_weibo_post1_sample1&utm_term=20190506_w_weibo_post1"
        >CHANEL.COM</a>了解更多
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";
import * as Api from "@/service";
import utils from "@/utils";

export default {
  data() {
    return {
      codeUrl: null
    };
  },
  mounted() {
    // this.init()
    this.generateQrcode();
  },
  methods: {
    async init() {
      try {
        localStorage.removeItem("camellia-sample-discern");
        const mobile = this.$route.query.mobile;
        let data = await Api.testClearData({
          mobile
        });
        alert("清理成功！即将跳转回专柜页...");
        location.href = "index.html";
      } catch (e) {
        alert(e.message);
      }
    },
    generateQrcode() {
      const discern = utils.queryString().channel;
      const host =
        location.origin + `/camellia-sample/index.html?channel=official_weibo`;
      QRCode.toCanvas(document.getElementById("qrcode"), host,{
        margin: 0,
        width: 150,
        height: 150
      }, error => {
        if (error) console.error(error);
        this.codeUrl = document
          .getElementById("qrcode")
          .toDataURL("image/jpeg");
      });
    }
  }
};
</script>
<style lang="less" scoped>
#show {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  // height: 100vh;
  margin: 0 auto;
  width: 1280px;
  .lf {
    // margin-right: 20px;
    img {
      // max-width: calc(1280 * 100vh / 1880);
      // height: 100vh;
      width: 640px;
      height: 900px;
    }
  }
  .rg {
    width: 640px;
    height: 900px;
    text-align: center;
    font-size: 30px;
    .txt {
      margin-top: 50px;
    }
    .txt-sm {
      font-size: 16px;
      margin-bottom: 44px;
    }
    .txt-sm:last-child{
      margin-bottom: 0px;
    }
    #code {
      width: 160px;
      height: 160px;
      margin: 30px auto;
      margin-top: 67px;
    }
    a {
      color: #000;
    }
    .production{
      height: 450px;
    }
  }
}
</style>

